<template>
	<view class="home" >
		<view class="home-head">
			<home-head-com ></home-head-com>
			<view class="banner" >
				<image :src="video.get_videoname ? video.get_videoname.horizontal_poster : ''" class="headerImg"></image>
				<video :src="video.ph_link" class="headerVideo"></video>
				<view class="contast">Contact Us</view>
			</view>
		</view>
		<view class="allContent">
			<view class="content-title">SIMILAR FILMS NOW SHOWING</view>
			<view class="content">
				 <view class="content-image" v-for="(videoOther, index) in video.similarVideos" :key="index" @click="goToVideo(videoOther.id)">
					 <image :src="videoOther.vertical_poster ? videoOther.vertical_poster : ''"></image>
				 </view>
			</view>
			
			<view class="content-title">CAST & CREW</view>
			<view class="content">
				 <view class="director-image" >
					 <image :src="video.director.pic_url ? video.director.pic_url : ''"></image>
					 <view>{{video.director.name_en }}</view>
				 </view>
			</view>
			<view class="content-title">SUMMARY</view>
			<view class="desc">
				<view>
					<text>Countries:</text>
					<text>{{video.get_videoname.country}}</text>
				</view>
				<view>
					<text>Languages:</text>
					<text>English</text>
				</view>
				<view>
					<text>Duration:</text>
					<text>{{video.get_videoname.length}}</text>
				</view>
				<view class="video-desc">
					<view>{{video.desc}}</view>
				</view>
			</view>
		</view>
		<view class="btn">
			<view >Inquiry</view>
		</view>
		
		<!-- <image class="return-top" mode="aspectFit" v-if="isTopButtonShow" @click="returnTop" src="/static/images/return-top.png"></image> -->
	</view>
</template>

<script>
	import Pagination from "mixins/Pagination"
	import { login } from 'api/authApi';
	import { getVideo} from "api/videoApi"
	import { getBroadcasts } from "api/broadcastApi"
	import GiftVipCardCom from "components/common/GiftVipCardCom"
	import HomeHeadCom from "components/common/HomeHeadCom"
	import BroadcastCom from 'components/common/BroadcastCom'
	import CategoryNavCom from "components/category/CategoryNavCom"
	import ProductsListCom from "components/product/ProductsListCom"
	import store from "store"
	import {mapGetters,mapActions} from 'vuex'
	
	export default {
		store,
		components:{
			CategoryNavCom,
			/* 
			GiftVipCardCom,
			
			BroadcastCom, */
			HomeHeadCom,
			ProductsListCom
		},
		mixins:[
			Pagination
		],
		computed: {
			...mapGetters(['isLogin'])
		},
		data() {
			return {
				video_id:0,
				video:[],
			}
		},
		methods: {
			...mapActions([
				'login'
			]),
			goToSearchPage() {
			  uni.navigateTo({url: '/packs/pages/product/search'})
			},
			goToVideo(id) {
			  uni.navigateTo({url: `/pages/video/show?video_id=`+id})
			},
			async loadVideo(id) {
			  var params={
				  "id":id,
			  }
			  
			  const response = await getVideo(params)
			 
			  this.video = response.data;
			  
			}
			
			
		},
		async onLoad(options){
			/* if (window.history && window.history.pushState) {
				history.pushState(null, null, document.URL);
			} */
			if(options.video_id){
				await this.loadVideo(options.video_id)
				
			}
			
			//await this.loadBroadcasts()
		},
		onShow() {
			
		},
		onReady() {
			/* this.categoryTop =  this.$refs.category.$el.getBoundingClientRect().top */
		}
	}
</script>

<style scoped lang="scss">
	.home{
		max-width:1920px;
		margin:0 auto;
		.banner{
			max-width:1680px;
			width:100%;
			margin:0 auto;
			text-align: center;
			>image{
				
				max-width:1680px;
				width:100%;
				height:400px;
			}
			.headerVideo{
				width:800px;
				height:400px;
				margin:50px auto 0;
				
			}
			.contast{
				margin:20px auto;
				width:100px;
				height:40px;
				line-height:40px;
				border:1px solid #333;
				border-radius: 5px;
				font-size:14px;
			}
		}
		.allContent{
			margin:70px auto 0;
			max-width:1680px;
			.content-title{
				margin-top:30px;
				font-size:22px;
				font-weight:700;
			}
			.content{
				
				display:flex;
				justify-content: space-between;
				margin-top:30px;
				.content-image{
					cursor: pointer;
					width:13%;
					>image{
						width:100%;
						height:270px;
					}
				}
				.director-image{
					width:160px;
					text-align: center;
					border:1px solid #ccc;
					>image{
						width:100%;
						height:200px;
					}
					>view{
						font-size:18px;
						padding:10px 0;
					}
				}
				
			}
			.desc{
				>view{
					margin-top:20px;
					>text:nth-child(1){
						font-weight:700;
					}
				}
				.video-desc{
					width:800px;
					font-size:14px;
					color:#333;
					
				}
			}
		}
		
	}
	.btn{
		margin:50px auto 200px;
		text-align: center;
		padding-bottom:100px;
		>view{
			width:100px;
			height:40px;
			line-height:40px;
			border:1px solid #333;
			border-radius: 5px;
			font-size:14px;
			text-align: center;
			margin:0 auto;
		}
	}
</style>
